<!-- 护理项目列表页 -->
<template>
    <div class="baseList">
        <div class="newBox">
            <button class="bt wt-120" @click="handleBulid()">
                新增护理项目
            </button>
        </div>
        <div class="tableBoxs">
            <!-- 当数据为空需要占位时，会显示 cellEmptyContent -->
            <t-table row-key="index" :data="data" :columns="COLUMNS" vertical-align="middle" :hover="hover"
                :loading="dataLoading" tabel-content-width="100%" table-layout="fixed">

                <!-- 序号 -->
                <template #rowIndex="{ rowIndex }">{{
                    (pagination.pageNum - 1) * pagination.pageSize + rowIndex + 1
                    }}</template>

                <!-- 图片预览及展示 -->
                <template #image="{ row }">
                    <div class="tdesign-demo-image-viewer__base">
                        <t-image-viewer :images="[row.image]">
                            <template #trigger="{ open }">
                                <div class="tdesign-demo-image-viewer__ui-image">
                                    <img alt="test" :src="row.image" class="tdesign-demo-image-viewer__ui-image--img" />
                                    <div class="tdesign-demo-image-viewer__ui-image--hover" @click="open">
                                        <span>
                                            <BrowseIcon size="1.4em" /> 预览
                                        </span>
                                    </div>
                                </div>
                            </template>
                        </t-image-viewer>
                    </div>
                </template>

                <!-- 价格拼接 -->
                <template #price="{ row }">
                    {{ row.price.toFixed(2) }}
                </template>

                <!-- 操作栏 -->
                <template #op="{ row }">
                    <div class="operateCon">
                        <a class="btn-dl" :class="row.count > 0 ? 'disabled' : ''"
                            @click="handleClickDelete(row)">删除</a>
                        <a class="font-bt" :class="row.count > 0 ? 'disabled' : ''" @click="handleEdit(row)">编辑</a>
                        <a class="delete" :class="row.count > 0 && row.status === 1
                            ? 'disabled btn-dl'
                            : row.status === 1
                                ? 'btn-dl'
                                : 'font-bt'
                            " @click="handleForbidden(row)">{{ row.status === 1 ? '禁用' : '启用' }}</a>
                    </div>
                </template>
            </t-table>

            <!-- 分页 -->
            <t-pagination v-if="total > 3" v-model="pagination.pageNum" v-model:pageSize="pagination.pageSize"
                :total="total" @change="onPageChange" />
        </div>
    </div>
</template>

<script setup lang="jsx">
import { COLUMNS } from '../constants'
/* 接收父组件传递过来的属性 */
const props = defineProps({
    data: {
        type: Object,//定义类型
        default: () => { }//给默认初始化值，为空
    },
    total: Number,
    pagination: {
        type: Object,//定义类型
        default: () => { }//给默认初始化值，为空
    },
    dataLoading: {
        type: Boolean,
        default: false
    }
})

/* 定义接收父组件传递过来的方法 */
const emit = defineEmits(['onPageChange', 'handleBulid', 'handleEdit',
    'handleDelete',
    'handleClickDelete',
    'handleForbidden'])

/* 执行单击触发翻页事件 */
const onPageChange = (val) => {
    emit('onPageChange', val)
}

//新增按钮使用传递过来的方法
const handleBulid = () => {
    emit('handleBulid')
}

//编辑   参数为一行数据
const handleEdit = (row) => {
    if (!row.count) {
        emit('handleEdit', row)
    }
}

//启用禁用   参数为一行数据
const handleClickDelete = (row) => {
    if (!row.count) {
        emit('handleClickDelete', row)
    }
}

//删除   参数为一行数据
const handleForbidden = (row) => {
    if (!row.count) {
        emit('handleForbidden', row)
    }
}
</script>